import React,{useState,useEffect} from 'react'
import { Table ,Button} from 'antd';
import axios from "../../model/assets"
import {exportExcel} from './excel';
export default function Assets() {
  
  useEffect(() => {
    axios.query({}).then((res)=>{
      // console.log(res.data)
      setarr(res.data)
    })
  }, [])
  let [arr,setarr]=useState<any>([])
  let [header,setheader]=useState<any>( [
    {
      title: '时间',
      dataIndex: 'time',
      key:"time"
    },
    {
      title: '收支类型',
      dataIndex: 'paytype',
      key:"paytype"
    },
    {
      title: '金额(元)',
      dataIndex: 'amount',
      key:"amount"
    },
    {
      title: '账单类型',
      dataIndex: 'billtype',
      key:"billtype"
    },
    {
      title:"余额(元)",
      dataIndex:"balance",
      key:"balance"
    },
    {
      title:"账单摘要",
      dataIndex:"note",
      key:"note"

    },
    {
      title:"订单号",
      dataIndex:"number",
      key:"number"
    }
  ])
  let [selectedRowKeys,setselectedRowKeys]=useState<any>([]);
  let onSelectChange = (selectedRowKeys:any) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    
    setselectedRowKeys(selectedRowKeys)
  };
  
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
    selections: [
      Table.SELECTION_ALL,
      Table.SELECTION_INVERT,
      Table.SELECTION_NONE,
      {
        key: 'odd',
        text: 'Select Odd Row',
        onSelect: (changableRowKeys:any) => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((key:any, index:any) => {
            if (index % 2 !== 0) {
              return false;
            }
            return true;
          });
          // this.setState({ selectedRowKeys: newSelectedRowKeys });
          setselectedRowKeys(newSelectedRowKeys)
        },
      },
      {
        key: 'even',
        text: 'Select Even Row',
        onSelect: (changableRowKeys:any) => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((key:any, index:any) => {
            if (index % 2 !== 0) {
              return true;
            }
            return false;
          });
          // this.setState({ selectedRowKeys: newSelectedRowKeys });
          setselectedRowKeys(newSelectedRowKeys)
        },
      },
    ],
  };
  const columns = [
    {
      title: '时间',
      dataIndex: 'time',
    },
    {
      title: '收支类型',
      dataIndex: 'paytype',
    },
    {
      title: '金额(元)',
      dataIndex: 'amount',
    },
    {
      title: '账单类型',
      dataIndex: 'billtype',
    },
    {
      title:"余额(元)",
      dataIndex:"balance"
    },
    {
      title:"账单摘要",
      dataIndex:"note"
    },
    {
      title:"订单号",
      dataIndex:"number"
    }
  ];
  const data = arr;


  
  return (
    <div>
      <div style={{paddingLeft:"30px",paddingTop:"30px",paddingBottom:"10px",backgroundColor:"#fff"}}>
        <p style={{fontSize:"18px"}}>资产管理</p>
        <hr></hr>
        <p>账户余额</p>
        <p style={{fontSize:"26px",fontWeight:"bolder",marginTop:"20px"}}>554,000</p>
      </div>
      <div style={{padding:"30px",marginTop:"30px",backgroundColor:"#fff"}}>
        <p>收支明细 <Button style={{float:"right"}} type="primary" onClick={()=>{
          // console.log(arr);
           exportExcel(header,arr,"资产报表.xlsx");
        }}>导出EXCEL报表</Button></p>
        <Table rowSelection={rowSelection} columns={columns} dataSource={data} rowKey={"id"} />
      </div>
    </div>
  )
}
